{% extends "base.html" %}

{% block title %}开发中 - 工时工具{% endblock %}

{% block content %}
<div class="flex flex-col items-center justify-center min-h-[80vh] text-center p-4">
    <!-- 开发中提示图标 - 带动画效果 -->
    <div class="relative mb-8">
        <div class="w-32 h-32 rounded-full border-8 border-primary/20 flex items-center justify-center animate-pulse">
            <div class="w-24 h-24 rounded-full border-4 border-primary/40 flex items-center justify-center">
                <!-- 修复：动画类名统一使用中划线命名 -->
                <i class="fa fa-cogs text-4xl text-primary animate-spin-slow"></i>
            </div>
        </div>
        <div class="absolute -top-2 -right-2 w-6 h-6 bg-primary rounded-full animate-bounce" style="animation-duration: 2s;"></div>
    </div>

    <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6 opacity-0 translate-y-4 animate-fade-in-up" style="animation-delay: 0.3s; animation-fill-mode: forwards;">
        功能开发中
        <span class="text-primary">●</span>
    </h1>
    <p class="text-lg md:text-xl text-gray-600 max-w-2xl mb-10 opacity-0 translate-y-4 animate-fade-in-up" style="animation-delay: 0.6s; animation-fill-mode: forwards;">
        我们正努力开发中，致力于为您提供更优质的功能。<br>敬请期待！
    </p>

    <!-- 进度条 -->
    <div class="w-full max-w-md h-2 bg-gray-200 rounded-full overflow-hidden mb-12 opacity-0 animate-fade-in" style="animation-delay: 0.9s; animation-fill-mode: forwards;">
        <!-- 修复：添加初始宽度为0的样式 -->
        <div class="h-full bg-primary rounded-full w-0 transition-all duration-3000 ease-out" id="progressBar"></div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="flex flex-col sm:flex-row gap-4 mt-6">
        <a href="/" class="group bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-1 flex items-center justify-center">
            <i class="fa fa-home mr-2 group-hover:scale-110 transition-transform"></i>
            返回首页
        </a>

        <button id="contactBtn" class="group bg-white border-2 border-gray-300 hover:border-primary text-gray-700 hover:text-primary font-medium py-3 px-8 rounded-lg transition-all duration-300 shadow-sm hover:shadow-md transform hover:-translate-y-1 flex items-center justify-center">
            <i class="fa fa-envelope mr-2 group-hover:scale-110 transition-transform"></i>
            联系我们
        </button>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
/* 自定义动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 修复：动画名称使用中划线命名保持一致 */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out;
}

.animate-spin-slow {
    animation: spin-slow 8s linear infinite;
}

/* 新增：通知提示的基础样式 */
.translate-y-10 {
    transform: translateY(10px);
}

.opacity-0 {
    opacity: 0;
}
</style>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', () => {
    // 进度条加载
    setTimeout(() => {
        const progressBar = document.getElementById('progressBar');
        const progress = 60 + Math.random() * 20;
        // 触发过渡动画
        progressBar.style.width = `${progress}%`;
    }, 500);

    // 联系我们按钮交互
    const contactBtn = document.getElementById('contactBtn');

    contactBtn.addEventListener('click', async () => {
        contactBtn.classList.add('scale-95');
        setTimeout(() => contactBtn.classList.remove('scale-95'), 200);

        try {
            // 修复：请求反馈页面应该是页面跳转而非JSON请求
            window.location.href = '/feedbackPage';
        } catch (error) {
            console.error('跳转反馈页面失败:', error);
            showNotification('无法打开反馈页面，请稍后重试', 'error');
        }
    });

    // 通知提示函数
    function showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg transform transition-all duration-300 translate-y-10 opacity-0 z-50 ${
            type === 'success' ? 'bg-green-50 text-green-800 border border-green-200' :
            'bg-red-50 text-red-800 border border-red-200'
        }`;
        notification.textContent = message;

        document.body.appendChild(notification);

        // 显示动画
        setTimeout(() => {
            notification.classList.remove('translate-y-10', 'opacity-0');
        }, 10);

        // 3秒后隐藏
        setTimeout(() => {
            notification.classList.add('translate-y-10', 'opacity-0');
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    }
});
</script>
{% endblock %}